<template>
  <div style="padding-top: 16px;">
    <z-button @click="toastTop('top')">上方弹出</z-button>
    <z-button @click="toastTop('middle')">中间弹出</z-button>
    <z-button @click="toastTop('bottom')">下面弹出</z-button>
    <p>
      <strong>代码</strong>
    </p>
    <pre><code>{{content}}</code></pre>
  </div>
</template>
<script>
  import {toastPlugin, zButton} from '../../../src/main'
  import Vue from 'vue'
  Vue.use(toastPlugin)

  export default {
    data() {
      return {
        content: `
          import { toastPlugin } from 'zwheel'
          Vue.use(toastPlugin)

          <z-button @click="toastTop('top')">上方弹出</z-button>
          <z-button @click="toastTop('middle')">中间弹出</z-button>
          <z-button @click="toastTop('bottom')">下面弹出</z-button>
      `.replace(/^ {8}/gm, '').trim()
      }
    },
    methods: {
      toastTop(position) {
        this.$toast('1111', { position })
      }
    },
    components: {zButton},
  }
</script>